<template>
    <div class="agreeServicePrivacy">
        <div class='moduleHead'>
            <span> {{language.unify_siteName}} </span>
        </div>
        <div class="body">
            <h2>{{language.agreeServicePrivacy_title}}</h2>
            <p v-html="language.agreeServicePrivacy_content_pre"></p>
            <br>
            <p>
                {{repalceStr(language.agreeServicePrivacy_content, [language.unify_siteName])}}
                <router-link class="a_link" :to="{name:'serviceAgreement'}" v-html="language.agreeServicePrivacy_serviceAgreement"></router-link>
                <router-link class="a_link" :to="{name:'privacyPolicy'}" v-html="language.agreeServicePrivacy_privacypolicy"></router-link>
            </p>
            <p v-html="language.agreeServicePrivacy_tips"></p>
            <p class="pcheckbox">
                <input @click="checkboxSelect" id="agree" type="radio" name="agree" value="1">
                <label for="agree">{{language.agreeServicePrivacy_agreeWith}}</label>
            </p>
            <p class="pcheckbox">
                <input @click="checkboxSelect" id="disagree" type="radio" name="agree" value="0">
                <label for="disagree">{{language.agreeServicePrivacy_disagreeWith}}</label>
            </p>
            <button class="btn" @click="submitData" :class="{submitDisabled:submitDisabled}"> {{language.unify_continue}} </button>
        </div>
        <loading :props="{show:loadingAjax,type:'page'}"></loading>
    </div>
</template>
<script>
import * as API from '../api';
import loading from './Loading'

let agree;

export default {

    name: 'agreeServicePrivacy',

    components: {
        loading,
    },

    data() {
        return {
            loadingAjax: false,
            submitDisabled: true
        }
    },

    methods: {

        checkboxSelect(e) {
            if (parseInt(e.target.value) == 1) {
                agree = 1;
            } else {
                agree = 0;
            }
            this.submitDisabled = false;
        },

        submitData() {
            var tthis = this;
            if (!this.submitDisabled && !this.loadingAjax) {
                tthis.loadingAjax = true;
                if (agree == 1) {
                    API.agree_pp_sa({
                        success: function(data) {
                            if (data.res == 1) {
                                Unit.setSessionStorage('ms_agree', 1);
                                tthis.$router.push({
                                    name: 'browse'
                                })
                            }
                        },
                        complete: function() {
                            tthis.loadingAjax = false;
                        }
                    })
                } else {
                    this.$store.dispatch('user_loginOut', this);
                }
            }
        },
    }
}

</script>
<style scoped>
.agreeServicePrivacy {
    padding-top: 44px;
    background-color: #f9f9f9;
}

.agreeServicePrivacy .body {
    padding: 20px;
}

.agreeServicePrivacy h2 {
    font-size: 24px;
    line-height: 34px;
    padding-bottom: 10px;
}

.agreeServicePrivacy p {
    font-size: 18px;
    line-height: 26px;
    margin-bottom: 10px;
}

.agreeServicePrivacy label {
    font-weight: bold;
}

.agreeServicePrivacy .a_link {
    border-radius: 3px;
    padding: 6px 4%;
    float: left;
    width: 92%;
    text-align: center;
    margin: 14px 0;
    border: 1px solid #ccc;
    color: #D4AC67;
}

.agreeServicePrivacy .a_link:last-child {
    margin-top: 0;
}

.agreeServicePrivacy input[type="radio"] {
    width: 16px;
    height: 16px;
    -webkit-appearance: radio;
    -moz-appearance: radio;
}

.agreeServicePrivacy button {
    font-size: 18px;
    height: 46px;
    line-height: 44px;
}

.agreeServicePrivacy .submitDisabled {
    background-color: #9B8C94;
    border: 1px solid #9B8C94;
}

</style>
